<template>
    <div>
        <div class="jc">
            <span>
                <h2 >商品列表</h2>
            </span>
            <span class="btn">
                <el-button @click="add()" style="margin:auto" size="medium" type="primary">
                    添加新的商品
                </el-button>
            </span>
        </div>

        <div style="margin:5px auto;width:99%;">
            
            <el-table :data="books" border style="width: 100%">
                <el-table-column 
			        prop="name" label="名称" min-width="20%">
			    </el-table-column>

				<el-table-column fixed
				    prop="sn" label="编号" min-width="10%">
				</el-table-column>

				<el-table-column 
				    prop="author" label="作者" min-width="10%">
				</el-table-column>

				<el-table-column 
				    prop="publisher" label="出版社" min-width="15%">
				</el-table-column>

				<el-table-column 
				    prop="tpublish" label="日期" min-width="10%">
				</el-table-column>

                <el-table-column label="图片" min-width="15%" fixed>
					<template slot-scope="scope">
						<div style="width: 100px;height: 100px;">
							<img v-bind:src="`${imgUrl}/api/public/showImg/${scope.row.picture}`"
								style="width: 100px; height: 100pxs;" />
						</div>
					</template>
				</el-table-column>

				<el-table-column label="操作" min-width="10%" fixed="right">
					<template slot-scope="scope">
						<el-button @click="update(scope.row)">
							修改
						</el-button>
					</template>
				</el-table-column>
            </el-table>

            <el-pagination :page-size="num"
                @current-change="pageChange"
                layout="prev, pager, next" :total="total">
            </el-pagination>
            
        </div>
    </div>
</template>
<script>
    export default {
        name:'Book',
        props:[],
        data() {
            return {
                books:[],
                //一页多少行
                num:6,
                //当前页数
                start:0,
                //总行数
                total:0,
            }
        },
        methods:{
            add(){
                this.$router.push({path:"/adm/book/add"})
            },
            pageChange(n){
                this.start = n;
                this.$get("/api/adm/book/findByPage/"+ (n-1)*6 +"/"+ _this.num)
                .then(function(resp){
                    _this.books = resp.data.data.books;
                    _this.total = resp.data.data.total;
                })
            },
            update(item){
                this.$router.push({
                    path : "/adm/book/add",
                    query:{id:item.id}
                })
            }
        },
        mounted(){
            window._this = this;
            this.$get("/api/adm/book/findByPage/0/6").then(
                function(resp) {
                    _this.books = resp.data.data.books;
                    _this.total = resp.data.data.total;
                }
            );
        }
    }
</script>
<style scoped="scoped">
    .jc{
        display: flex;
        margin: 0 5px;
        justify-content:space-between;
        border-bottom: 2px solid gray;
    }
    .btn{
        display: flex;
        justify-content: center;
        align-content:center;
    }
    .page{
        display: flex;
        justify-content:space-between;
        width: 200px;
    }
    .page div{
        cursor: pointer;
    }
    table{
        border-collapse: collapse;
        margin-bottom: 8px;
    }
    .btnColor{
        color: coral;
    }
</style>
